<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>404</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../../static/lib/bootstrap-3.4.1/css/bootstrap.min.css"
          th:href="@{/lib/bootstrap-3.4.1/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../static/css/my.css" th:href="@{/css/my.css}">
    <style rel="stylesheet">
        .error-page-box h1 {
            font-size: 30px;
            color: #0188DE;
            padding: 20px 0px 10px;
        }

        .error-page-box h2 {
            color: #0188DE;
            font-size: 16px;
            padding: 10px 0px 40px;
        }

        .error-page-box p {
            color: #666;
        }

        .error-page-box {
            width: 910px;
            padding: 20px 20px 40px;
            margin-top: 80px;
            border-style: dashed;
            border-color: #e4e4e4;
            line-height: 30px;
            margin-left: auto;
            margin-right: auto;
        }

        .error-page-operate .operateBtn {
            width: 180px;
            height: 28px;
            margin-left: 0px;
            margin-top: 10px;
            background: #009CFF;
            border-bottom: 4px solid #0188DE;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            color: #fff;
        }

        .error-page-operate .operateBtn:hover {
            background: #5BBFFF;
        }
    </style>
</head>
<body>
<nav th:replace="fregments :: menu(1)" class="navbar navbar-default navbar-fixed-top m-padding">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="../static/favicon.ico" style="width: 24px;">
            </a>
            <p class="navbar-text navbar-default"><a href="#" class="navbar-link m-a-none"><b>挚夕导航</b></a></p>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home">&nbsp;</span>首页</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-pencil">&nbsp;</span>学习</a></li>
                <li role="presentation" class="disabled"><a href="#"><span
                        class="glyphicon glyphicon-bookmark">&nbsp;</span>个人书签</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <img class="m-avatar img-circle" src="../static/images/me.jpg">
                        挚夕
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li><a href="#"><span class="glyphicon glyphicon-th">&nbsp;</span>个人主页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out">&nbsp;</span>登出</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索" style="width: 300px;">
                </div>
                <button type="submit" class="btn btn-default">
                    <a class="glyphicon glyphicon-search m-none"></a>
                </button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="m-margin-top">
    <div class="m-container">
        <div class="error-page-box">
            <h1>抱歉，所需的页面无法找到，请检查地址是否正确，然后重试</h1>
            <h2>Sorry, the site now can not be accessed.</h2>
            <p>请联系系统管理员进行处理，我们会尽快修复。您可以：</p>
            <div class="error-page-operate">
                <a href="javascript:window.location.reload()" class="operateBtn m-a-none" title="刷新试试">刷新试试</a>
                <a th:href="@{/}" class="operateBtn m-a-none" title="返回首页">返回首页</a>
            </div>
        </div>
    </div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer th:replace="_fregments :: footer">
    <div>
        <div class="row">
            <div class="col-sm-4 col-md-4">
                <h3>挚夕导航</h3>
                <p>
                    挚夕导航最初源于本人想要做一个管理书签的系统。<br>
                    后来借鉴了一些导航网站，决定做一个网站导航。<br>
                    前端使用BootStrap。
                </p>
            </div>
            <div class="col-sm-8 col-md-8">
                占位
            </div>
        </div>
    </div>

    <div style="text-align: center;">
        Copyright 2023-now 挚夕导航 Designed by 挚夕
    </div>
</footer>
<!--/*/<th:block th:replace="_fregments :: script">/*/-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../../static/lib/jquery-1.12.4/jquery.min.js" th:src="@{/lib/jquery-1.12.4/jquery.min.js}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../../static/lib/bootstrap-3.4.1/js/bootstrap.min.js"
        th:src="@{/lib/bootstrap-3.4.1/js/bootstrap.min.js}"></script>
<!--  bootstrap-dropdown-hover -->
<script src="../../static/lib/bootstrap-dropdown-hover.js" th:src="@{/lib/bootstrap-dropdown-hover.js}"></script>
<script>
    $(function () {
        //bootstrap-dropdown-hover
        $('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
            // see next for specifications
        });
        //特效
        $("li").hover(function () {
            $(this).toggleClass("m-up");
        })
    });
</script>

<!--/*/</th:block>/*/-->
</body>
</html>